<template>
  <div class="ui-filter">
    <slot />
    <div class="ui-filter__fast">
      <div
        v-for="(item, index) in fastFilterItems"
        :key="index"
        class="ui-filter__item"
      >
        <span class="ui-filter__label" v-if="item.props.label">{{item.props.label}}</span>
        <div class="ui-filter__target">
          <component :is="handleRenderItem(item)" :data-key="item.info.count" />
        </div>
      </div>
    </div>
    <div class="ui-filter__more" v-if="moreFilterItems && moreFilterItems.length">
      <filter-more
        :value="value"
        :items="moreFilterItems"
        :label-width="labelWidth"
      ></filter-more>
    </div>
  </div>
</template>
<script>
import { isEmpty } from '@/utils/util'
import FilterMore from './filter-more'

export default {
  name: 'UiFilter',
  components: {
    FilterMore
  },
  provide() {
    return {
      UiFilter: this
    }
  },
  props: {
    value: {
      type: Object
    },
    ready: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: '80px'
    }
  },
  data() {
    return {
      items: []
    }
  },
  computed: {
    fastFilterItems() {
      return this.items.filter(v => !v.props.more)
    },
    moreFilterItems () {
      return this.items.filter(v => !!v.props.more)
    },
    operaterFnMap () {
      return {
        eq ({ field, value }) {
          return [[field, '=', value]]
        },
        like ({ field, value }) {
          return [[field, '=', `%${value}%`]]
        },
        between ({ field, value }) {
          if (Array.isArray(value)) {
            const result = value.reduce((rs, v, i) => {
              if (isEmpty(v)) {
                return
              }
              if (i === 0) {
                rs.push([field, '>', v])
              } else {
                rs.push([field, '<', v])
              }
              return rs
            }, [])
            if (!result.length) {
              return
            }
            return result
          }
        },
        in () {

        }
      }
    }
  },
  watch: {
    value: {
      handler() {
        if (this.ready) {
          this.handleChange()
        }
      },
      deep: true
    }
  },
  methods: {
    handleChange() {
      this.$emit('change')
    },
    getFilters() {
      const simple = {}
      const where = []
      Object.keys(this.value || {}).forEach(key => {
        if (isEmpty(this.value[key])) {
          return
        }
        let filterValue = this.value[key]
        const item = this.items.find(v => v.props && v.props.prop === key)
        if (item) {
          if (item.props.transform) {
            filterValue = item.props.transform({
              value: filterValue
            })
          }
          if (!this.operaterFnMap[item.props.operater]) {
            throw new Error('不支持的操作符' + item.props.operater)
          }
          const fields = [item.props.prop]
          fields.forEach(field => {
            const filterItem = this.operaterFnMap[item.props.operater]({
              field,
              value: filterValue
            })
            if (!filterItem) {
              return
            }
            filterItem.forEach(item => {
              where.push(item)
            })
          })
        } else {
          simple[key] = filterValue
        }
      })
      return {
        simple,
        complex: {
          where
        }
      }
    },
    handleRenderItem(item) {
      return {
        functional: true,
        render: (h, c) => {
          return item.render(h, c)
        }
      }
    },
    addItem(item) {
      if (!item || !item.id) {
        return
      }
      let index = -1
      this.items.some((v, i) => {
        if (v.id === item.id) {
          index = i
          return true
        }
      })
      if (index >= 0) {
        this.items.splice(index, 1, item)
      } else {
        this.items.push(item)
      }
    },
    removeItem(id) {
      this.items = this.items.filter(v => v.id !== id)
    }
  }
}
</script>
<style>
.ui-filter{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.ui-filter__fast{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.ui-filter__item{
  margin-right: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ui-filter__item:last-child{
  margin-right: 0;
}
.ui-filter__label{
  color: #999;
  padding-right: 9px;;
}
.ui-filter__more{
  margin-left: 12px;
}
</style>
